import { Button, Card, Table, Modal, message } from "antd";
import React, { Component } from "react";
import { PAGE_SIZE } from "../../utils/constant";
import { reqRoles, reqAddRoles, reqUpdateRole } from "../../api/index";
import AddForm from "./AddFrom";
import AuthForm from "./AuthForm";
//权限
export default class Role extends Component {
  state = {
    roles: [], //所有角色列表
    role: {}, //选中的角色
    isShowAdd: false, //显示添加页面
    isShowAuth: false, //显示权限页面
  };

  constructor(props) {
    super(props);
    this.auth = React.createRef();
  }

  getRoles = async () => {
    const result = await reqRoles();
    console.log(9998777, result);
    if (result.status === 200) {
      const roles = result.data;
      //更新状态
      this.setState({
        roles,
      });
    }
  };

  //初始列的数据
  initColumn = () => {
    this.columns = [
      {
        title: "角色名称",
        dataIndex: "name",
      },
      {
        title: "创建时间",
        dataIndex: "createTime",
      },
      {
        title: "授权时间",
        dataIndex: "authTime",
      },
      {
        title: "授权人",
        dataIndex: "authName",
      },
    ];
  };
  onRow = (role) => {
    return {
      onClick: (event) => {
        console.log(9990000, role);
        //点击行
        this.setState({ role });
      },
    };
  };

  //添加角色
  addRole = () => {
    this.form.current
      .validateFields()
      .then(async (values) => {
        //隐藏确认框
        this.setState({ isShowAdd: false });
        const { name } = values;
        this.form.current.resetFields();
        //请求添加
        const results = await reqAddRoles(name);
        if (results.status === 200) {
          message.success("添加角色成功");
          // this.getRoles();
          const role = results.data;
          //更新roles
          // const roles = this.state.roles;
          const roles = [...this.state.roles];
          roles.push(role);
          this.setState({
            roles,
          });
          //根据结果
        }
      })
      .then((error) => {
        message.success("添加角色失败");
      });
    // const { name } = this.form.current.getFieldsValue();
    // //收集数据
    // console.log(1111222, this.form.current.getFieldsValue());
    // console.log(333334444, name);
  };

  //更新角色
  updateRole = async () => {
    //隐藏确认框
    this.setState({
      isShowAuth: false, //显示权限页面
    });
    const role = this.state.role;
    console.log("role", role);
    //得到最新的menus
    const menus = this.auth.current.getMenus();
    role.menus = menus;
    //请求更新
    const result = await reqUpdateRole(role);
    if (result.status === 200) {
      message.success("角色权限更新成功");
      this.getRoles();
    }
  };

  componentWillMount() {
    this.initColumn();
  }
  //发送Ajax请求
  componentDidMount() {
    this.getRoles();
  }
  render() {
    const { roles, role, isShowAdd, isShowAuth } = this.state;
    const title = (
      <span>
        <Button
          type="primary"
          onClick={() => this.setState({ isShowAdd: true })}
        >
          创建角色
        </Button>
        <Button
          type="primary"
          disabled={!role.id}
          onClick={() => this.setState({ isShowAuth: true })}
        >
          设置角色权限
        </Button>
      </span>
    );
    return (
      <Card title={title}>
        <Table
          bordered
          rowKey="id"
          dataSource={roles}
          columns={this.columns}
          pagination={{ defaultPageSize: PAGE_SIZE }}
          rowSelection={{
            type: "radio",
            selectedRowKeys: [role.id],
            onSelect: (role) => {
              this.setState({
                //选择radio
                role,
              });
            },
          }}
          onRow={this.onRow}
        ></Table>
        <Modal
          title="添加角色"
          visible={isShowAdd}
          onOk={this.addRole}
          onCancel={() => {
            this.setState({ isShowAdd: false });
            this.form.current.resetFields();
          }}
        >
          <AddForm
            setForm={(form) => {
              this.form = form;
            }}
          />
        </Modal>
        <Modal
          title="设置角色权限"
          visible={isShowAuth}
          onOk={this.updateRole}
          onCancel={() => {
            this.setState({ isShowAuth: false });
          }}
        >
          <AuthForm ref={this.auth} role={role} />
        </Modal>
      </Card>
    );
  }
}
